<template>
    <div class="container">
        <el-card>
      <template #header>
         <el-icon :size="40" @click="add(city,((daytempl[0]/1+nighttempl[0]/1)/2).toFixed(0),adcode)" ><CirclePlusFilled color="white" /></el-icon>
         <HeadDemo />
      </template>
       <template #default>
          <div class="tips">你正在预览{{ city }}的天气信息,可以通过右上角的'+号'按钮保存</div>
          <div class="weather-info">
            <h2>当日气温是: {{ ((daytempl[0]/1+nighttempl[0]/1)/2).toFixed(0)}} 摄氏度</h2>
            <h2>当日天气是: {{ dayweather}}</h2>
            <h2>当日风向是: {{ daywind }}风</h2>
            <h2>当日风力是: {{ daypower}} 级</h2>
            <!-- <p>{{ casts[0].date}}</p> -->
          </div>
          <div class="weather-chart"> 

            <el-table :data="weatherData"  >
             <!-- 表格列定义等 -->
              <el-table-column prop="col1"  width="200" ></el-table-column>
             <el-table-column prop="col2"   width="200"></el-table-column>
             <el-table-column prop="col3"   width="200"></el-table-column>
             <el-table-column prop="col4"   width="200"></el-table-column>
           </el-table>
           <!-- 折线图 -->
           <div class="chart">
               <v-chart :option="dayoption"  ></v-chart>
               <v-chart :option="nightoption" ></v-chart>
           </div>
           
          </div>
       </template>

    </el-card>
    </div>
   
   
   
</template>

<script setup>
import { CirclePlusFilled } from '@element-plus/icons-vue'
import axios from 'axios'
import { ref, watch } from 'vue'
import HeadDemo from '../components/HeadDemo.vue'
import { useRoute } from 'vue-router'
import { color } from 'echarts'
import { useCounterStore } from '../stores/counter'

const {add} = useCounterStore();

const route = useRoute()

const data = route.params.data
const city = data.split('+')[0]
const adcode = data.split('+')[1]

// 当前气温
const nowdaytemp = ref('')

// 当前天气
const dayweather =ref('')

// 当日风向
const daywind = ref('')

// 当日风力
const daypower = ref('')

// 天气数据
const casts = ref([])


const weatherData = ref([])

// 白天气温数据
const daytempl = ref([])
console.log(daytempl)
// 晚上气温数据
const nighttempl = ref([])




// 数字转大写的函数
const toUpperCase = (num) => {
   switch(num/1){
      case 1:
         return '一'
         break;
      case 2:
         return '二'
           break;
      case 3:
         return '三'
           break;
      case 4:
         return '四'
      case 5:
         return '五'
           break;
      case 6:
         return '六'
           break;
      case 7:
         return '日'
           break;
      default:
         return ''
           break;
   }
}

const dayoption = ref({})
const nightoption = ref({})
const renderLineChart = ( option,templ,colors,formatter) => {
   option.value={
    xAxis:{
      type: 'category',
      show: false,
      boundaryGap: false,
    },
    yAxis:{
      type: 'value',
      show: false,
    },
   
  
    grid:{
      top:150,
     
    },
    series:{
      type: 'line',
      data: templ,
       label: {
        color:'white',
        fontSize: 20,
        show: true,
        position: 'top',
        distance: 10,
        formatter: formatter,
      },
      lineStyle:{
       color:colors,
       width: 2
       
      },
      itemStyle:{
        opacity: 1,
       color:'lightblue',
       width: 2,
    
      },
      smooth:true
    }
  }
}

watch(casts,() => {
  renderLineChart(dayoption,daytempl.value,'rgb(255, 157, 76)','白{c}°C ')
  renderLineChart(nightoption, nighttempl.value,'rgb(48, 151, 253)','晚{c}°C ')
  
})
 

 const getweather = async() => {
   const weather = await axios.get(`https://restapi.amap.com/v3/weather/weatherInfo?city=${adcode}&key=ec953eff8c0a3b2a2955578624b0e28f&extensions=all`)
   console.log(weather.data)
   nowdaytemp.value = weather.data.forecasts[0].casts[0].daytemp
   dayweather.value = weather.data.forecasts[0].casts[0].dayweather
   daywind.value = weather.data.forecasts[0].casts[0].daywind
   daypower.value = weather.data.forecasts[0].casts[0].daypower

   casts.value = weather.data.forecasts[0].casts
  console.log(casts.value[0].date)

    weatherData.value=  [
     {col1: '今天',                            col2: '明天',                                col3:`周${toUpperCase(casts.value[2].week)}`, col4:`周${toUpperCase(casts.value[3].week)}`  },
     {col1: casts.value[0].date,               col2: casts.value[1].date,                  col3:casts.value[2].date,                     col4:casts.value[3].date,},
     {col1: casts.value[0].dayweather,         col2: casts.value[1].dayweather,            col3:casts.value[2].dayweather,               col4:casts.value[3].dayweather , },
     {col1:`风力 ${casts.value[0].daypower}级`, col2: `风力${casts.value[1].daypower}级`,   col3: `风力${casts.value[2].daypower}级`,      col4: `风力${casts.value[3].daypower}级` ,},

]

   daytempl.value = [weather.data.forecasts[0].casts[0].daytemp,weather.data.forecasts[0].casts[1].daytemp,weather.data.forecasts[0].casts[2].daytemp,weather.data.forecasts[0].casts[3].daytemp]
   nighttempl.value = [weather.data.forecasts[0].casts[0].nighttemp,weather.data.forecasts[0].casts[1].nighttemp,weather.data.forecasts[0].casts[2].nighttemp,weather.data.forecasts[0].casts[3].nighttemp]
  
}


   getweather()
</script>

<style lang="scss" scoped>
@import 'reset-css';
.container {
  position: relative;
    width: 100%;
    height: 1700px;
  font-size: 40px;

  .el-card {
    
        .el-icon{
            position: absolute;
            top:48px;
            right: 170px;
    }
   
    background-color: rgb(1, 102, 138);
    height: 100%;

    :deep(.el-card__body){
       padding: 0px;
        .tips{
            font-size: 25px;
           letter-spacing: 5px;
            color: white;
            height: 70px;
            line-height: 70px;
            text-align: center;
            background-color: rgb(0,78,113);
        }
        .weather-info{
            border-bottom: 1px solid white;
            width: 100%;
            color: white;
            text-align: center;

            h2{
                margin-top: 30px;
                margin-bottom: 20px;
                font-size: 30px;
            }
        }
        .weather-chart{
          text-align: center;
            // background-color: aquamarine;
            width: 100%;
            margin-top: 10px;
            

            .el-table{
               width: 57%;
              margin: 0 auto;
               height: 300px;
               font-size: 25px;
                 background-color:rgb(0,78,113);
              
             tr{
                height: 50px;
                th{
                    text-align:center;
                    margin-left: 70px;
                      background-color:rgb(0,78,113);
                       border: 0px solid white;
                }
                td{
                    text-align: center;
                    border: 0px solid white;
                    color: white;
                       background-color:rgb(0,78,113);
                }
             }
            }
             .chart{
                display: block;
                 padding-top: 50px;
                // position: relative;
                // top:-10px;
                  width: 57%;
                // box-sizing: border-box;
                height: 250px;
              //  padding-top: 80px;
                margin:0 auto;
               
                  background-color:rgb(0,78,113);
             .echarts{
           
                  margin: 0 auto;
                   height: 100px;
                  
                   width: 80%;
                  

              }

             }
            
        }

    }
  }
}
</style>